/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {View, TextInput} from 'react-native';
import { Tabs, Icon, Button,Toast,Badge, DatePicker, List  } from 'antd-mobile-rn';
import SplashScreen from 'react-native-splash-screen';

// project
import {
	Page, Content, Svg, Text, Label, Image, ScrollX, ScrollY, ItemX, ItemY, Row, Header, Footer, Float, Wrap, Between, Touch, Hand, ButtonOpacity, ButtonLight, TouchOpacity, TouchLight, Center
} from '../../../library'
import {Icon1} from '../../../preset';
import HttpTemp from "../../../preset/func/http/httptemp"

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class OpenDoor extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
			// 页面tab切换
			tabs:[
				{title:'小区门禁'},
				{title:'访客车辆'}
			],

			//过期时间
			timeout:null,
			//使用次数
			usecount:null,
			//使用码
			usecode:null,
			//房屋信息
			myhouse:{},

		}
	}
	
    /**
     * didMount
     */
    componentDidMount(){
        // SplashScreen.hide();
        HttpTemp.get({
            url:"page/location/subdistrict.php",
            success:(res) => {
                let data = res.data;
                this.setState({
					myhouse:data
                })
            }
        })

    }


	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
	/**
	 * 访客通行信息填写完成后的提交操作
	 */
	getusecode = ()=>{

		let timechuo = 0;
		if(this.state.timeout == null){
			Toast.info('请选择过期时间',1);
			return;
		}else{
			timechuo = new Date(this.state.timeout).getTime()/1000
		}
		if(this.state.usecount == null){
			Toast.info('请填写使用次数',1)
			return;
		}
		
        HttpTemp.post({
			url:"/page/guest/logic/gencode.php",
			data:{
				set_use_times:parseInt(this.state.usecount),
				time_over:timechuo,
			},
            success:(res) => {
				if(res.code == 0){
					let data = res.data;
					this.setState({
						usecode:data.set_code
					})
					Toast.info('使用码已生成',5)
	
				}else{
					Toast.info(res.msg,5)

				}

            }
        })


	}

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render() {

		var myDate = new Date();

		const style = {
			borderBottomColor:'#26c75e',
			borderBottomWidth:3,
			width: 20
		}
		return (
			<Page>
				{/* 内容部分 */}
				<Content my='40' bg='#efeff4'>

				   <View style={{display:'flex'}}>

						{/* 右侧tab菜单 */}
						<View style={{flex:1}}>

							{/* 左侧图标 */}
							<View style={{ width:50, flex:1, marginBottom:-30,  zIndex:111 }}>
								<View style={{backgroundColor:'#fff'}}>
									<Image source={require('../../../assets/my.png')} w='20' h='20' ml='5' mt='8'/>
								</View>
							</View>


							<Tabs 
								style={{ zIndex:100 }}
								tabs={this.state.tabs} 
								tabBarUnderlineStyle={style} 
								tabBarActiveTextColor='#26c75e' 
								tabBarTextStyle={{ size:16 }}

							>

				   					{/* 小区门禁 */}
									<View style={{marginLeft:20,marginRight:20,marginTop:30,borderRadius:5}}>
				   						<View style={{padding:10,backgroundColor:'#fff'}}>

										   {/* 选择小区 */}
											<Row h='40' y='center' bb='1 #f0f0f0' pb='8'>
												<Hand f='2'>
													<Image source={require('../../../assets/location.png')} w='18' h='18' top="3"/>
													<Text size="16"> {this.state.myhouse.set_name}</Text>
												</Hand>
												<Hand f='1' x='right' >
													{/* <Icon type='right' size='16' color='#aaa'></Icon> */}
												</Hand>
											</Row>

											{/* 选择当日有效期 */}

											<List style={{}}>

												<DatePicker
													onChange={(val) => {
														this.setState({
															timeout:val
														})
													}}
													value={ this.state.timeout }
													mode="datetime"
													minDate={new Date()}
													maxDate={new Date(myDate.getFullYear(),myDate.getMonth(),myDate.getDate(), 24)}
												>
													<List.Item arrow="horizontal" style={{ marginLeft:-15  }}>
														<Text>过期时间</Text>
													</List.Item>
												</DatePicker>
											</List>

                                                {/* <Text ba='1 #d2d2d2' ra='3' size='12' pa='2'>1小时</Text>
                                                <Text px='5'>:</Text>
                                                <Text ba='1 #d2d2d2' ra='3' size='12' pa='2'>10分钟</Text>
                                                <Text px='5'>至</Text>
                                                <Text ba='1 #d2d2d2' ra='3' size='12' pa='2'>2小时</Text>
                                                <Text px='5'>:</Text>
                                                <Text ba='1 #d2d2d2' ra='3' size='12' pa='2'>10分钟</Text> */}




											{/* 输入使用码次数 */}
											<Row bb='1 #ddd' h='40' y='center'>
                                                <Text color="#666" mr='10'>使用次数:</Text>
												<TextInput 
													onChangeText={(val) => {
														this.setState({
															usecount:val
														})
													}}
													defaultValue={this.state.usecount}
													keyboardType="numeric"
													placeholder='请输入使用码' 
													underlineColorAndroid='transparent' 
													style={{width:150, fontSize:14, top:2}}
													placeholderTextColor="#c9c9c9"
												></TextInput>
                                            </Row>

											{/* 填写使用码 */}
                                            <Row h='40' y='center'>
                                                <Text color="#666" mr='10'>使用码:</Text>
												<TextInput 
													value={this.state.usecode}
													editable={false}
													underlineColorAndroid='transparent' 
													style={{width:150, fontSize:14, top:2, color:"black"}}
													placeholderTextColor="#c9c9c9"
												></TextInput>
                                            </Row>

										</View>

										{/* 提交按钮 */}
										<View style={{ marginTop:20, marginLeft:20, marginRight:20}}>
											<Button style={{backgroundColor:'#21ac43',borderRadius:0,borderWidth:0,height:45}} onClick={this.getusecode}><Text color='#fff' size='16'>提交</Text></Button>
										</View>

									</View>

									{/* 楼宇门 */}
									<View>
										<Text>暂未开启此功能</Text>
									</View>
							</Tabs>
						</View>

				   </View>

				</Content>
				
                {/* 头部 */}
				<Header h='40' bg='#fff' px='10'></Header>
				{/* 底部 */}
				<Footer bg='#fff'></Footer>

			</Page>
		);
	}
}
